<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css?v=1.1" media="all">

    <style>
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 4px;
        }

        .el-tree{
            background: #dfefff;
        }
        body{
            background: #dfefff;
        }

        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
            background-color: #409effbf;
        }
    </style>

</head>
<body>
<div id="app">
    <el-form  size="mini"  :label-position="labelPosition"  >
        <el-form-item label=""  >
            <el-input style="width:180px" v-model="searchObj.lxdh" placeholder="手机号、姓名、身份证号码、房间号"  ></el-input>
        </el-form-item>


        <el-form-item  >
            <el-button type="primary" style="width: 180px;"  size="mini" @click="searchTree">查询</el-button>
        </el-form-item>

    </el-form>

    <div style="display: none;" id="searchTree" >
        <el-tree  :data="searchData"  ref="tree1" :props="defaultProps" :default-expanded-keys="treeData"  node-key="id"  @node-click="handleNodeClick" ></el-tree>
    </div>

    <div v-if="showTreev" >
        <el-tree  :lazy="true"   :highlight-current="true" ref="tree2" :default-expanded-keys="treeData"  node-key="id" :props="defaultProps" :expand-on-click-node="true" :load="getDataTreeForSearch" @node-click="handleNodeClick"></el-tree>
    </div>





</div>

<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            labelPosition:"right",
            treeData:["0000"],
            showTreev:true,
            searchObj:{"xm":""},
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            searchData:[],
            rootNode:{},
            rootResolve:{},
        },
        created(){
            // this.getData();
        },
        methods:{
            async searchTree(){
                $("[role=treeitem]").remove();
                this.getDataTreeForSearch(this.rootNode,this.rootResolve);
            },
            handleNodeClick(treeNode) {
                let openurl = "/admin/html/module/sichuangwuye/hesuan/content.html?type="+treeNode.type+"&id="+treeNode.id+"&v="+guid();
                let itembread = top.vm.getBreadcrumb();
                itembread.three = treeNode.title;
                top.vm.setBreadcrumb(itembread);
                parent.vm.setUrl(openurl);
            },
            //获取数据
            async getDataTree2(item,resolve){
                let listdata = [];
                if(item.data == undefined){
                    item.data = {type:"-1"};
                    this.rootNode = item;
                    this.rootResolve = resolve;
                }
                console.log(item.data);
                const response = await postWebCustom(getTableId("648"),{item:JSON.stringify(item.data)});
                const res = response.data;
                for(let a=0;a<res.length;a++){
                    if(res[a].open!=undefined && res[a].open){
                        this.treeData.push(res[a].id);
                    }
                    listdata.push(res[a]);
                }
                resolve(listdata);
            },
            async getDataTreeForSearch(item,resolve){
                let listdata = [];
                if(item.data == undefined){
                    item.data = {type:"-1"};
                    this.rootNode = item;
                    this.rootResolve = resolve;
                }
                const response = await postWebCustom(getTableId("906"),{type:item.data.type,lxdh:this.searchObj.lxdh,id:item.data.id});
                if(response.code == 0){
                    top.alert(response.msg);
                    return;
                }
                const res = response.data;
                for(let a=0;a<res.length;a++){
                    if(res[a].open!=undefined && res[a].open){
                        this.treeData.push(res[a].id);
                    }
                    listdata.push(res[a]);
                }
                resolve(listdata);
            }
        }
    });



</script>
</body>
</html>